<template>
    <div style="background-color: #fff !important;height: 100vh;width: 100%;margin: 0px;padding:0px;overflow-y: hidden;">
        <div id="header" style="box-shadow: 5px 5px 5px #f0f0f0;">
            <div style="height:5px"></div>
            <el-row>
                <el-col :span="12">
                    <div style="width: 40px;float: left;margin-left: 100px;padding-top: 2px">
                        <div style="height:5px"></div>
                        <img src="./../../assets/img/logo.png" height="80">
                    </div>
                </el-col>
                <el-col :span="12" >
                    <div class="text-right" style="padding-top: 2px">
                        <img src="./../../assets/img/logo-right.jpg" height="80">
                    </div>
                </el-col>
            </el-row>
        </div>
      <div style="width:60%;margin:0 auto;margin-top:50px;" class="step_icon">
      <el-steps :active="active"  finish-status="success">
        <el-step title="验证用户" ></el-step>
        <el-step title="完善信息" ></el-step>
        <el-step title="注册成功" ></el-step>
      </el-steps>
      </div>
        <div class="content center-center" >
            <div v-if="active==0">
                <el-form  label-width="100px" style="width: 700px;" ref="formLabelAlign"   :model="formLabelAlign" v-if="select==1">
                  <el-form-item label="" prop="activeKey" :rules="[{ required: true, message: '请输入激活码', trigger: 'blur' }]">
                    <el-input v-model="formLabelAlign.activeKey" size="medium">
                      <template slot="prepend">
                        <el-tooltip placement="top" content="请填写激活码">
                          <el-button tabIndex="-1">激活码</el-button>
                        </el-tooltip>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="" prop="name" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
                    <el-input v-model="formLabelAlign.name"  size="medium">
                      <template slot="prepend">
                        <el-tooltip placement="top" content="请填写用户名">
                          <el-button tabIndex="-1">用户名</el-button>
                        </el-tooltip>
                      </template>
                    </el-input>
                  </el-form-item>
                    <el-form-item label="" prop="password" :rules="[{ validator: validatePass, trigger: 'blur' }]">
                        <el-input v-model="formLabelAlign.password" type="password"  size="medium">
                          <template slot="prepend">
                            <el-tooltip placement="top" content="请填写密码">
                              <el-button tabIndex="-1">密码</el-button>
                            </el-tooltip>
                          </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="passwordConfirm"  :rules="[{ validator: validatePass2, trigger: 'blur' }]">
                        <el-input v-model="formLabelAlign.passwordConfirm" type="password"  size="medium">
                          <template slot="prepend">
                            <el-tooltip placement="top" content="请填写密码">
                              <el-button tabIndex="-1">确认密码</el-button>
                            </el-tooltip>
                          </template>
                        </el-input>
                    </el-form-item>
                  <el-form-item label="" prop="realName"  :rules="[{ required: true, message: '请输入真实姓名', trigger: 'blur' }]">
                    <el-input v-model="formLabelAlign.realName" type="text"  size="medium">
                      <template slot="prepend">
                        <el-tooltip placement="top" content="请填写真实姓名">
                          <el-button tabIndex="-1">真实姓名</el-button>
                        </el-tooltip>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="" prop="phone"  :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' },rules.phone]">
                    <el-input v-model="formLabelAlign.phone" size="medium">
                      <template slot="prepend">
                        <el-tooltip placement="top" content="请填写手机号">
                          <el-button tabIndex="-1">手机号</el-button>
                        </el-tooltip>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="" prop="code" :rules="[{  trigger: 'blur' }]"  size="medium">
                        <el-input v-model="formLabelAlign.code">
                          <template slot="prepend">
                            <el-tooltip placement="top" content="请填写短信验证">
                              <el-button tabIndex="-1">短信验证</el-button>
                            </el-tooltip>
                          </template>
                          <el-button slot="append" v-if="!time>0" @click="getCode">发送短信</el-button>
                          <el-button  slot="append"   v-if="time>0">{{time}}后重新发送</el-button>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                        <el-row>
                        <el-col :span="12" style="padding-left:100px;">
                            <el-checkbox v-model="formLabelAlign.checked" >我已阅读并同意使用协议</el-checkbox>
                        </el-col>
                        <el-col :span="8">
                            <div class="text-right" style="color:#20a0ff;font-size:14px;">
                                <span style="color:#9b9b9b;font-size:14px;">已有账号？</span><span style="cursor: pointer;" @click="goBack">请登录</span>
                            </div>
                        </el-col>
                    </el-row>
                    <div style="margin-top: 2vh;">
                        <div class="butDiv text-center" :style="formLabelAlign.checked?'':'background-color: rgb(135, 138, 137)'" @click="commit('formLabelAlign')" style="width:70%">
                            <span class="butSpan" >下一步</span>
                        </div>
                    </div>

                </el-form>
            </div>

          <div v-if="active==1">
            <el-form  label-width="100px" style="width: 600px;" ref="formLabelAlign1"   :model="formLabelAlign1" v-if="select==1">
              <el-form-item label="" prop="companyName" :rules="[{ required: true, message: '请输入公司名称', trigger: 'blur' }]">
                <el-input v-model="formLabelAlign1.companyName"  size="medium">
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请填写公司名称">
                      <el-button tabIndex="-1">公司名称</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="linker"  :rules="[{ required: true, message: '请输入联系人', trigger: 'blur' }]">
                <el-input v-model="formLabelAlign1.linker"   size="medium">
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请填写联系人">
                      <el-button tabIndex="-1">联系人</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="address"  :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]">
                <el-input v-model="formLabelAlign1.address"  size="medium">
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请填写地址">
                      <el-button tabIndex="-1">地址</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="telephone"  :rules="[{ required: true, message: '请输入电话', trigger: 'blur' }]">
                <el-input v-model="formLabelAlign1.telephone"   size="medium">
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请填写电话">
                      <el-button tabIndex="-1">电话</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>

              <div style="margin-top: 2vh;">
                <div class="butDiv text-center"  @click="submitForm('formLabelAlign1')" style="width:68%">
                  <span class="butSpan" >下一步</span>
                </div>
              </div>

            </el-form>
          </div>
          <div v-if="active==2">
            <div class="text-center">
                <i class="el-icon-success" style="font-size: 40px;color:#409EFF"></i>
               <div style="font-size: 20px;color:#409EFF;margin-top:10px;">您已注册成功 !</div>
              <div style="margin-top:5px;cursor: pointer;color:#409EFF;" @click="goLogin">立即登录？</div>
            </div>
              <!--<div style="margin-top: 2vh;">-->
                <!--<div class="butDiv text-center"  @click="submitForm('formLabelAlign')" style="width:68%">-->
                  <!--<span class="butSpan" >下一步</span>-->
                <!--</div>-->
              <!--</div>-->

          </div>
        </div>
      <div id="jia_footer" style="position: fixed;bottom:10px;width:100%">
        <div class="jia_foot_info">
          <p>
            <strong style="padding-left: 10px">Copyright</strong> © 2007-2018  版权所有归属：西安秦晔信息技术有限公司
          </p>
        </div>
      </div>
        <div v-if="this.isReging">
            <div style="position: absolute;left:0; top:0; right:0; bottom: 0; opacity: 0.4; background: #FFF;"></div>
            <div style="position: absolute;left:0; top:40%; width: 100%; height:60%; background: #FFF; z-index: 10; text-align: center; border-radius: 10px;">
                <span class="fa fa-spinner fa-spin" style="font-size: 64px;color:#BCBCBC; margin: 32px;"></span>
            </div>
        </div>
    </div>
</template>
<script>
    //注意路径
    import headerModel from './header.vue'
    export default {

        data() {
            return {
                imgCode:"",
                jcaptcha:"",
                formLabelAlign: {
                    name: '',
                    password: '',
                    passwordConfirm: '',
                    checked:true,
                    activeKey:"",
                   phone:"",
                    code:""
                },
                time:0,
                select:1,
                title:"注册",
                dinningMode:[],
                isShowSms:false,
                isReging:false,
                active: 0,
                formLabelAlign1:{}
            }
        },
        components: {headerModel},
        created() {
            window.this = this;
            this.getInit();
            // this.changeImg();
        },
        methods: {
          goLogin(){
            this.router.push({path:"/login"});
          },
            jiaoyan(){

            },
            changeImg(){
                // var $this=this;
                // this.$http.get("jcaptcha").then((data)=>{
                //     $this.jcaptcha=data.body.content
                // })
            },
          commit(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  if(!this.formLabelAlign.checked){
                    return ;
                  }
                  var data = {};
                  data.formLabelAlign=this.formLabelAlign;
                  this.$axios.post("organization/merchantGroups/verify",data,"json").then(data=>{
                    if(data.status==200){
                      if (this.active++ > 2) this.active = 0;//跳到下一步
                    }else {
                      console.log(data);
                      this.$message({
                        message:data.message,
                        type: 'error'
                      });
                      console.log("ddddd>>>>>>>>>>>");
                      return false;
                    }
                  })
                }else{
                  /*  this.$message({
                      message:data.message,
                      type: 'error'
                    });*/
                  return false;
                }
            })
          },
            submitForm(formName) {
                if(this.isReging){
                    return false;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.isReging = true;
                        var data = {};
                        data.formLabelAlign=this.formLabelAlign;
                        data.merchantGroup=this.formLabelAlign1;
                          this.$axios.post("organization/merchantGroups/registerMerchantGroups",data,"json",false).then(data=>{
                            console.log("data:: ",data);
                            this.isReging = false;
                            if(data.status==200){
                              this.$message({
                                message:data.message,
                                type: 'success'
                              });
                              if (this.active++ > 2) this.active = 0;//跳到下一步
                              console.log("active ::::::::: : ",this.active)

                              // this.router.push({path:"/login"});
                            }else{
                              this.$message({
                                message:data.message,
                                type: 'error'
                              });
                            }
                          });
                    } else {
                     /* this.$message({
                        message:data.message,
                        type: 'error'
                      });*/
                        return false;
                    }
                });
            },
            /*拿取行业还有菜系数据*/
            getInit(){
                // this.$http.get("merchants/getInit").then((response)=>{
                //     if(response.body.success){
                //         this.dinningMode=response.body.content.mode;
                //     }
                //
                // },(response)=>{})
            },
            goBack() {
                this.router.go(-1);
            },
            getCode(){
                /*验证码*/
                if(!(/^1[3|2|4|5|7|8][0-9]\d{4,8}$/.test(this.formLabelAlign.phone))){
                   this.$message.error("请填写正确的手机号");
                    return false;
                }
                if (this.formLabelAlign.phone && this.formLabelAlign.phone!="") {
                    var $this = this;
                    this.$axios.get("organization/merchantGroups/sendCode",{phone:this.formLabelAlign.phone}).then(response=>{
                        if(response.success){
                            this.isShowSms=true;
                            window.countDown = 60;
                            this.time=window.countDown;
                            window.t = setInterval(function () {
                                window.countDown--;
                                $this.time = window.countDown;
                                if (window.countDown == 0) {
                                    window.clearInterval(window.t)
                                }
                            }, 1000);
                          this.$message({
                            message:response.message,
                            type: 'success'
                          });
                        }else{
                          this.$message({
                            message:response.message,
                            type: 'error'
                          });
                        }
                    });
                }else{
//                  this.$message({
//                    message:response.message,
//                    type: 'error'
//                  });
                }

            },
            validatePass (rule, value, callback) {
                // /*if (value === '') {
                //     callback(new Error('请输入密码'));
                // } else {
                //     if (this.modelForm.password !== '') {
                //         this.$refs.modelForm.validateField('password');
                //
                //     }
                // }*/
                callback();

            },
            validatePass2 (rule, value, callback)  {
                console.log(value);
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formLabelAlign.password ) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            },
        }
    }
</script>
<style scoped>
    .content{
        margin-top: 5vh;
    }
    .butDiv{
        width: 400px;background-color: rgb(13, 98, 77);margin-left: 100px;border-radius: 5px;cursor: pointer;
    }
    .butDiv .butSpan{
        height: 40px;line-height: 40px;padding:10px;color:#fff;cursor: pointer;
    }
    .code{
        background-color:#999;line-height: 40px;padding: 8px 12px;color:#fff;border-radius: 5px;border:1px solid #C0C0C0;
    }
    .code1{
        background-color:#fff;line-height: 40px;padding: 8px 12px;color:#000;border-radius: 5px;border:1px solid #C0C0C0;
    }
     #jia_footer {
        /*height: 29vh;*/
        /*margin-top: 8vh;*/
        background-color: #fff;
        border-top: 1px solid #c0c0c0;
    }
    .jia_foot_info {
        text-align: center;
        color: #666;
    }
    .jia_foot_info p {
        line-height: 24px;
        color: #aaa;
    }
    #jia_footer .jia_foot_link {
        padding: 10px 0;
        text-align: center;
    }
    #jia_footer a {
        color: #999;
    }
    .jia_foot_info .jia_foot_link a {
        color: #333;
        padding: 0 15px;
    }

</style>

